<template>
  <el-config-provider :size="size" :z-index="zIndex" :locale="locale">
    <router-view></router-view>
  </el-config-provider>
</template>

<script name="app" setup>
import { onMounted } from 'vue'
import { ElConfigProvider } from "element-plus";
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
import "dayjs/locale/zh-cn";
const locale = zhCn;
const zIndex = 3000;
const size = "default";

import Cookies from "js-cookie";
import { clearAllCookies } from "@/utils/cookie.js";
import { getFingerPrint } from "@/utils/fingerprint.js";
import { getProxyIP  } from "@/api/ip.js";

onMounted(async () => {
  await fp();
  await ip();
});
const fp = async () => {
  try {
    if(Cookies.get("_f")) return;
    // 首次调用会自动初始化并获取
    const _fp = await getFingerPrint();
    console.log("fp", _fp, Cookies.get("_f"));
    if (_fp !== Cookies.get("fp")) {
      clearAllCookies();
    }
    Cookies.set("_f", _fp, { expires: 7 });
  } catch (error) {
    console.error(error);
  }
};

const ip = async () => {
  try {
    if(Cookies.get("_i")) return;
    let data = await getProxyIP();
    console.log("ip", data);

    let { query, country, regionName, city, isp, lat, lon, zip } = data;
   Cookies.set("pos",JSON.stringify({ ip:query, country, prov:regionName, city, isp, lat, lng:lon, district:zip }), { expires: 7 });
   Cookies.set("_i",query, { expires: 7 });
  } catch (error) {
    console.error(error);
  }
};
</script>

<style scoped>
nav a.router-link-exact-active {
  color: var(--color-text);
}

nav a.router-link-exact-active:hover {
  background-color: transparent;
}

nav a {
  display: inline-block;
  padding: 0 1rem;
  border-left: 1px solid var(--color-border);
}

nav a:first-of-type {
  border: 0;
}
</style>
